<template>
    <div class="card">
        <div class="block">
            <div v-if="this.cardData == ''" class="noEquipment"> 
                该项绑定设备未开启
            </div>
            <el-carousel trigger="click" class="card_alarmhighenablet" :autoplay="false"  :initial-index="cardData.index" >
            <el-carousel-item v-for="(item,index) in cardData.unit" :key="index">
                <!-- 设备标题 -->
                 <router-link to="/overview">
                    <h4 class="normal" @click="router('xtg401',item)" :title="item.name">
                        <!-- <svg class="icon card_icon" aria-hidden="true">
                            <use xlink:href="#icon-jiedian"></use>
                        </svg> -->
                        <img class="title_icon" src="../../assets/title.png" alt />
                        {{item.typename}}:&nbsp;{{item.name}}
                    </h4>
                 </router-link>
                <!-- 卡片内容 -->
                <div class="card_padding">
                    <div class="card_left">
                        <div class="card_pdiv">
                            <div class="item" v-if="item.unit[0].ready == 1">
                                <div class="overflowHidden">
                                    {{item.unit[0].name}}
                                </div>
                                <svg :class="item.unit[0].alarmstate == 1 ? 'icon gjd_icon warning2':item.unit[0].value == 0 ? 'icon gjd_icon':'icon gjd_icon color_blue'"  aria-hidden="true">
                                    <use xlink:href="#icon-icon-alarm"></use>
                                </svg>
                            </div>
                            <div class="item" v-if="item.unit[1].ready == 1">
                                <div class="overflowHidden">
                                    {{item.unit[1].name}}
                                </div>
                                <svg :class="item.unit[1].alarmstate == 1 ? 'icon gjd_icon warning2':item.unit[1].value == 0 ? 'icon gjd_icon':'icon gjd_icon color_blue'"  aria-hidden="true">
                                    <use xlink:href="#icon-icon-alarm"></use>
                                </svg>
                            </div>
                            <div class="item" v-if="item.unit[2].ready == 1">
                                <div class="overflowHidden">
                                    {{item.unit[2].name}}
                                </div>
                                <svg :class="item.unit[2].alarmstate == 1 ? 'icon gjd_icon warning2':item.unit[2].value == 0 ? 'icon gjd_icon':'icon gjd_icon color_blue'"  aria-hidden="true">
                                    <use xlink:href="#icon-icon-alarm"></use>
                                </svg>
                            </div>
                            <div class="item" v-if="item.unit[3].ready == 1">
                                <div class="overflowHidden">
                                    {{item.unit[3].name}}
                                </div>
                                <svg :class="item.unit[3].alarmstate == 1 ? 'icon gjd_icon warning2':item.unit[3].value == 0 ? 'icon gjd_icon':'icon gjd_icon color_blue'"  aria-hidden="true">
                                    <use xlink:href="#icon-icon-alarm"></use>
                                </svg>
                            </div>
                            <div class="item" v-if="item.unit[4].ready == 1">
                                <div class="overflowHidden">
                                    {{item.unit[4].name}}
                                </div>
                                <svg :class="item.unit[4].alarmstate == 1 ? 'icon gjd_icon warning2':item.unit[4].value == 0 ? 'icon gjd_icon':'icon gjd_icon color_blue'"  aria-hidden="true">
                                    <use xlink:href="#icon-icon-alarm"></use>
                                </svg>
                            </div>
                            <div class="item" v-if="item.unit[5].ready == 1">
                                <div class="overflowHidden">
                                    {{item.unit[5].name}}
                                </div>
                                <svg :class="item.unit[5].alarmstate == 1 ? 'icon gjd_icon warning2':item.unit[5].value == 0 ? 'icon gjd_icon':'icon gjd_icon color_blue'"  aria-hidden="true">
                                    <use xlink:href="#icon-icon-alarm"></use>
                                </svg>
                            </div>
                            <div class="item" v-if="item.unit[6].ready == 1">
                                <div class="overflowHidden">
                                    {{item.unit[6].name}}
                                </div>
                                <svg :class="item.unit[6].alarmstate == 1 ? 'icon gjd_icon warning2':item.unit[6].value == 0 ? 'icon gjd_icon':'icon gjd_icon color_blue'"  aria-hidden="true">
                                    <use xlink:href="#icon-icon-alarm"></use>
                                </svg>
                            </div>
                            <div class="item" v-if="item.unit[7].ready == 1">
                                <div class="overflowHidden">
                                    {{item.unit[7].name}}
                                </div>
                                <svg :class="item.unit[7].alarmstate == 1 ? 'icon gjd_icon warning2':item.unit[7].value == 0 ? 'icon gjd_icon':'icon gjd_icon color_blue'"  aria-hidden="true">
                                    <use xlink:href="#icon-icon-alarm"></use>
                                </svg>
                            </div>
                            <div class="item" v-if="item.unit[8].ready == 1">
                                <div class="overflowHidden">
                                    {{item.unit[8].name}}
                                </div>
                                <svg :class="item.unit[8].alarmstate == 1 ? 'icon gjd_icon warning2':item.unit[8].value == 0 ? 'icon gjd_icon':'icon gjd_icon color_blue'"  aria-hidden="true">
                                    <use xlink:href="#icon-icon-alarm"></use>
                                </svg>
                            </div>
                            <div class="item" v-if="item.unit[9].ready == 1">
                                <div class="overflowHidden">
                                    {{item.unit[9].name}}
                                </div>
                                <svg :class="item.unit[9].alarmstate == 1 ? 'icon gjd_icon warning2':item.unit[9].value == 0 ? 'icon gjd_icon':'icon gjd_icon color_blue'"  aria-hidden="true">
                                    <use xlink:href="#icon-icon-alarm"></use>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="card_right">
                        <div class="card_right_top">
                            <span class="fangshi" v-if="infraredenable">当前布防:</span>
                            <span class="fangshi" v-if="!infraredenable">当前撤防:</span>
                            <el-switch
                                v-model="infraredenable"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="infraredenableSwitch($event)"
                                class="infraredenable_switch">
                            </el-switch>
                        </div>
                        <div class="card_right_bottom">
                            <div class="card_right_do" v-if="item.unit[10].ready == 1">
                                <div class="card_right_name">{{item.unit[10].name}}:</div>
                                <el-switch
                                    v-model="item.unit[10].value"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    @change="doSwitch(item,10,$event,index)"
                                    class="infraredenable_switch">
                                </el-switch>
                            </div>
                            <div class="card_right_do" v-if="item.unit[11].ready == 1">
                                <div class="card_right_name">{{item.unit[11].name}}:</div>
                                <el-switch
                                    v-model="item.unit[11].value"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    @change="doSwitch(item,11,$event,index)"
                                    class="infraredenable_switch">
                                </el-switch>
                            </div>
                            <div class="card_right_do" v-if="item.unit[12].ready == 1">
                                <div class="card_right_name">{{item.unit[12].name}}:</div>
                                <el-switch
                                    v-model="item.unit[12].value"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    @change="doSwitch(item,12,$event,index)"
                                    class="infraredenable_switch">
                                </el-switch>
                            </div>
                            <div class="card_right_do" v-if="item.unit[13].ready == 1">
                                <div class="card_right_name">{{item.unit[13].name}}:</div>
                                <el-switch
                                    v-model="item.unit[13].value"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    @change="doSwitch(item,13,$event,index)"
                                    class="infraredenable_switch">
                                </el-switch>
                            </div>
                        </div>
                    </div>
                    
                </div>
                
            </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
export default {
    props: ['nowIndex', 'cardData', 'nowId'],

    data () {
        return{
            timer1: '',
            clickGetData:'',//延迟保存计时器
            clickNumber:0,//延迟保存点击次
            infraredenable:true,
            infraredData:{
                "infraredenable": true,
            },
                
        }
    },
    created() {
        this.parseData()
        this.$nextTick(() => {
             this.timer1 = setInterval(() => {
                setTimeout(this.parseData(), 0);
            }, 1000); 
        })
    },
    methods: {
        // 跳转
        router(val,item){
            var arr = {
                addr:item.addr,
                name:item.name,
                type:item.type,
                uid:item.uid
            }
            localStorage.setItem("当前设备编号", JSON.stringify(arr))
            localStorage.setItem("menuRouter", val)
        },
        parseData(){
            //console.log('拿取'+this.clickNumber+this.infraredData.infraredenable+this.infraredenable)  //真实状态    下发和显示状态
            this.infraredData = JSON.parse(localStorage.getItem("红外布撤防数据")) //特殊卡片缓存数据真实状态刷新慢，接口3秒读一次数据
            if(this.clickNumber == 0){  // 延迟判断状态中不接受真实状态
                this.infraredenable = this.infraredData.infraredenable
            }
        },
        //红外开关
        infraredenableSwitch(data){
            // 延迟保存方法-------------------------
            this.clickNumber = 1
            clearInterval(this.clickGetData);
            this.clickGetData = null;
            this.clickGetData = setInterval(() => {
                //console.log('等待'+this.clickNumber+this.infraredenable+data) //显示状态    下发状态
                this.clickNumber++;
                if(this.infraredData.infraredenable == !data){ // 返回的值和下发值不一致，等待返回 (套用方法只修改这里的判断对比值就可以)
                    this.infraredenable = data
                }else{ // 返回的值和下发值一致，取消等待，拿取真实值
                    clearInterval(this.clickGetData);
                    this.clickGetData = null;
                    this.clickNumber = 0
                }
                if(this.clickNumbe >= this.$store.state.waittTime){ //等待5秒后，取消等待，拿取真实值 waittTime统一宏变量
                    clearInterval(this.clickGetData);
                    this.clickGetData = null;
                    this.clickNumber = 0
                }
            }, 1000); 
            // ----------------------------------
            var params = {
                'setinfraredenable':data,
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl,params).then((res)=>{
                if(res.data.result == 'ok' ){
                }else if(res.data.result == 'No access rights'){
                    this.$message({
                        message: '请登录后操作',
                        type: 'warning',
                        duration: 1500
                    });
                    // 延迟保存方法-------------------------
                    clearInterval(this.clickGetData);
                    this.clickGetData = null;
                    this.clickNumber = 0
                    // ------------------------
                }
            })
        },
        //do控制
        doSwitch(item,id,value,index){
            var params = {
                "setdevinfo":[
                    {
                        "uid": item.uid,
                        "unit":[{
                            id:id,
                            value:value == true ? 1 :0
                        }]
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            // 延迟保存方法
            clearInterval(this.clickGetData);
            this.clickGetData = null;
            this.clickNumber = 0
            this.clickGetData = setInterval(() => {
                this.clickNumber++;
                if(this.cardData.unit[index].unit[id].value == !value){ // 返回的值和下发值不一致，等待返回
                    this.cardData.unit[index].unit[id].value = value
                }else{ // 返回的值和下发值一致，取消等待，拿取真实值
                    clearInterval(this.clickGetData);
                    this.clickGetData = null;
                    this.clickNumber = 0
                }
                if(this.clickNumbe > this.$store.state.waittTime){ //等待5秒后，取消等待，拿取真实值 waittTime统一宏变量
                    clearInterval(this.clickGetData);
                    this.clickGetData = null;
                    this.clickNumber = 0
                }
            }, 1000);   
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.result == 'ok' ){
                }else if(res.data.result == 'No access rights'){
                    this.$message({
                        message: '请登录后操作',
                        type: 'warning',
                        duration: 1500
                    });
                    clearInterval(this.clickGetData);
                    this.clickGetData = null;
                    this.clickNumber = 0
                }
            })
        }
    },
     // 清除定时器
    beforeDestroy() {
        clearInterval(this.timer1);
        this.timer1 = null;
        clearInterval(this.clickGetData);
        this.clickGetData = null;
    },
}
</script>

<style scoped>

/deep/ .el-carousel__container .el-carousel__arrow {
    height: 150px !important;
    width: 50px !important;
    border-radius: 0;
    background: none;
}
/deep/ .el-carousel__arrow--right{
    right: 0px !important;
}
/deep/ .el-carousel__arrow--left {
    left: 0px !important;
}
/deep/ .el-icon-arrow-left {
    margin-left: -25px !important;
}
/deep/ .el-icon-arrow-right{
    margin-right: -20px !important;
}
/deep/ .el-carousel__indicators{
    display: none;
}
.card_padding .item .overflowHidden{
    width: 110px;
    border-left: 5px solid #5ac2f2;
    padding-left: 10px;
    /* float: left; */
}
.card_padding{
    width: 100%;
    height: 220px;
    padding: 0px 10px 10px 10px;
    display: flex;
    margin-top: 15px;
    /* flex-wrap:wrap;
    justify-content: center;
    align-items: center; */
}
.card_left{
    width: 50%;
    height: 215px;
    overflow-y: scroll;
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    /* align-items: center; */
}
.card_right{
    width: 50%;
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    /* align-items: center; */
}
.card_right_top{
    margin-top: 10px;
    height: 5px;
}
.gjd_icon{
    position: relative;
    top: -2px;
}
.card_pdiv{
    flex: 1;
}
.card_padding .item{
    height: 42px;
    padding-left: 10px;
    font-size: 16px;
    /* justify-content: center; */
    align-items: center;
    display: flex;
}
.color_blue{
    color: #5ac2f2;
}
.fangshi{
    color: #ffb700;
}
.card_right_bottom{
    height: 120px;
    display: flex;
    flex-wrap:wrap;
    /* justify-content: center; */
    /* align-items: center; */
}
.card_right_do{
    width: 100%;
    margin-bottom: 21px;
    display: flex;
    align-items: flex-end;
}
.card_right_name{
    width: 128px;
    text-align: right;
    padding-right: 5px;
    position: relative;
    top: -2px;
}
</style>